<template>
	<view class="order-layout">
		<my-header title="我的订单"></my-header>
		<my-content class="content">
			<view class="header">
				<!--        <view class="tab">
          <view
            @click="changeStatus(item.id)"
            class="tab_item"
            v-for="item in statusArr"
            :key="item.id"
            :class="status === item.id ? 'active' : ''"
          >
            <view class="tab_title">{{ item.title }}</view>
            &lt;!&ndash; <view class="tab_border"></view> &ndash;&gt;
          </view>
        </view>-->
				<my-tab start v-model="status" :tab-list="statusArr"></my-tab>
			</view>

		<empoy v-if="orderData.length == 0"></empoy>
			<scroll-view class="scroll"  refresher-background="" :refresher-triggered="refreshStatus"
				@refresherrefresh="refresh" :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
				<view class="order" v-if="orderData.length > 0 && resultStatus">
					<view class="order_item item-bg" @click="header(`/pages/order/detail?id=${item.id}`)"
						v-for="(item, index) in orderData" :key="item.id">
						<view class="order_header">
							<view class="order_no">订单编号：{{ item.order_no }}</view>
							<!-- :style="{ color: item.status_color }" -->
							<view class="order_status">{{ item.status_str }}</view>
						</view>

						<view class="divider"></view>

						<view class="order_detail">
							<view class="order_detail_item" v-for="goods in item.order_detail" :key="goods.id">
								<view class="goods-img-bg">
									<image mode="widthFix" class="goods_image" :src="goods.goods_image"></image>
								</view>
								<view class="goods_info">
									<view class="goods_name">{{ goods.goods_name }}</view>
									<view class="goods_attr" v-if="goods.attr_values">
										<text class="goods_attr_value">{{ goods.attr_values }}</text>
									</view>
									<view class="goods_price">
										<view class="price">
											<view class="price_icon">￥</view>
											<view>{{ goods.goods_price }}</view>
										</view>
										<view class="goods_num">x {{ goods.num }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="divider"></view>
						<view class="bottom">
							<view class="total">
								<view class="total_title">
									<text class="total_title_info">共{{ item.num }}件 |</text>
									<text>合计：</text>
								</view>
								<view class="total_price">
									<view class="price_icon">￥</view>
									<view>{{ item.pay_amount }}</view>
								</view>
							</view>
							<view class="order_action">
								<view class="order_action_btn btn-primary cancel" v-if="item.action.cancel_btn"
									@click.stop="cancel(item, index)">
									取消订单
								</view>
								<view class="order_action_btn btn-primary cancel" v-if="item.action.del_btn"
									@click.stop="del(item, index)">
									删除订单
								</view>
								<view class="order_action_btn btn-primary pay" v-if="item.action.pay_btn && !payed"
									@click.stop="pay(item)">
									立即支付
								</view>
								<view class="order_action_btn btn-primary pay" v-if="item.action.pay_btn && payed">立即支付
								</view>
								<view class="order_action_btn btn-primary pay" v-if="item.action.receive_btn"
									@click.stop="express(item.id)">
									查看物流
								</view>
								<view class="order_action_btn btn-primary receive" v-if="item.action.receive_btn"
									@click.stop="receive(item.id)">
									确认收货
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</my-content>

		<my-alert-dialog ref="alertDialog" title="提示" content="确定取消订单吗？" cancelString="暂不"
			@confirm="handleConfirm"></my-alert-dialog>

		<my-alert-dialog ref="delDialog" title="提示" content="确定要删除订单嘛?" @confirm="handleDelOrder"></my-alert-dialog>
		<my-alert-dialog ref="receiveDialog" title="提示" content="确定收货嘛？"
			@confirm="handleReceiveDialog"></my-alert-dialog>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	import empoy from '../../components/empoy/empoy.vue'
	export default {
		components: {
			empoy
		},
		data() {
			return {
				status: 0,
				statusArr: [{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '待付款'
					},
					{
						id: 2,
						title: '待发货'
					},
					{
						id: 3,
						title: '待收货'
					},
					{
						id: 4,
						title: '已完成'
					},
				],
				page: 1,
				last_page: 1,
				orderData: [],
				resultStatus: false,
				refreshStatus: false,
				payed: false,
				top: 80,
			}
		},
		watch: {
			status() {
				this.page = 1
				this.getOrders(2)
			}
		},
		onLoad(option) {
			this.status = +option.status || 0
			this.getOrders(1)
		},
		onShow() {
			this.payed = false
		},
		methods: {
			express(id) {
				this.header(`/pages/order/express?id=${id}`)
			},
			back() {
				this.header('/pages/user/index', 2)
			},
			lower() {
				if (this.page >= this.last_page) {
					this.show('没有更多数据了')
					return
				}
				this.page++
				this.getOrders(1)
			},
			refresh() {
				this.refreshStatus = true
				this.page = 1
				this.getOrders(2)
			},
			getOrders(type) {
				uni.showLoading({
					title: '数据加载中',
				})
				api.orders
					.index({
						page: this.page,
						status: this.status
					})
					.then((res) => {
						if (res.code === 200) {
							this.resultStatus = true
							this.refreshStatus = false
							uni.hideLoading()
							this.last_page = res.data.last_page
							if (type === 1) {
								this.orderData = this.orderData.concat(res.data.data)
							} else {
								this.orderData = res.data.data
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			changeStatus(id) {
				if (this.status !== id) {
					this.status = id
					this.resultStatus = false
					this.page = 1
					this.orderData = []
					this.getOrders(2)
				}
			},
			handleReceiveDialog(id) {
				api.orders
					.receive(id)
					.then((res) => {
						if (res.code === 200) {
							this.show('收货成功')
							this.refresh()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			receive(id) {
				this.$refs.receiveDialog.show(id)
			},
			handleConfirm(item) {
				api.orders
					.cancel(item.id)
					.then((res) => {
						if (res.code === 200) {
							this.show('取消成功')
							this.refresh()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			cancel(item, index) {
				this.$refs.alertDialog.show(item)

				/* uni.showModal({
				  title: '提示',
				  content: `确定取消订单吗？`,
				  success: (result) => {
				    if (result.confirm) {
				      
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  },
				}) */
			},
			handleDelOrder(id) {
				api.orders
					.del(id)
					.then((res) => {
						if (res.code === 200) {
							this.show('删除成功')
							this.refresh()
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
			del(item, index) {
				this.$refs.delDialog.show(item.id)
			},
			pay(item) {
				api.orders
					.edit(item.id)
					.then((res) => {
						if (res.code === 200) {
							// 微信支付
							if (item.pay_type == 1) {
								let pay_data = res.data.data
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: {
										appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										noncestr: pay_data.noncestr, // 随机字符串
										package: pay_data.package, // 固定值
										partnerid: pay_data.partnerid, // 微信支付商户号
										prepayid: pay_data.prepayid, // 统一下单订单号
										timestamp: pay_data.timestamp, // 时间戳（单位：秒）
										sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
									},
									success: (res) => {
										this.payed = false
										this.refresh()
									},
									fail: (error) => {
										this.payed = false
										this.refresh()
									},
								})
							} else if (item.pay_type == 2) {
								let pay_data = res.data.data
								uni.requestPayment({
									provider: 'alipay',
									orderInfo: pay_data,
									success: (res) => {
										this.payed = false
										this.refresh()
									},
									fail: (error) => {
										this.payed = false
										this.refresh()
									},
								})
							}
						}
					})
					.catch((error) => {
						console.log(error)
					})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.order-layout {
		height: 100vh;
		background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100% 100%;
	}

	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.header {
			margin: 0 20rpx;

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				/* background-color: #fff; */

				width: 100%;
				height: 80rpx;

				.tab_item {
					font-size: 26rpx;
					color: #808080;
					width: 136rpx;
					height: 46rpx;
					line-height: 46rpx;
					text-align: center;

					.tab_border {
						width: 50rpx;
						height: 8rpx;
					}

					&.active {
						background-image: url('https://www.dingxians.cn/upload/images/box/tab-bg-active.png');
						background-size: 100% 100%;

						.tab_title {
							color: #ded000;
							font-weight: bold;
						}
					}
				}
			}
		}

		.scroll {
			box-sizing: border-box;
			padding-top: 20rpx;
			flex: 1;
			/* position: fixed; */
			/* top: 230rpx; */
			margin: 0 auto;

			/*  overflow-y: scroll; */
			/* height: calc(100vh - 230rpx); */
			/* height: 100%; */
			&::-webkit-scrollbar {
				display: none;
			}

			overflow: hidden;
		}

		.order {
			display: flex;
			flex-direction: column;

			&.none {
				display: flex;
				justify-content: center;
				align-items: center;
				height: calc(100vh - 400rpx);

				.none_image {
					width: 200rpx;
				}

				.none_text {
					color: #999;
					font-size: 24rpx;
				}
			}

			.order_item {
				display: flex;
				flex-direction: column;
				border-radius: 10rpx;
				width: 710rpx;
				margin: 0 auto 20rpx auto;
				/* padding: 0 30rpx; */
				box-sizing: border-box;
				padding: 0 20rpx;
				color: white;

				.order_header {
					display: flex;
					justify-content: space-between;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 24rpx;
					opacity: 0.7;
					padding: 0 20rpx;

					.order_status {
						color: white;
						font-size: 30rpx;
						font-weight: bold;
						opacity: 0.7;
					}
				}

				.divider {
					width: 686rpx;
					height: 2rpx;
					background: linear-gradient(116deg,
							rgba(255, 255, 255, 0) 0%,
							#ffffff 48%,
							rgba(255, 255, 255, 0) 100%,
							#eee 100%);
					opacity: 0.16;
				}

				.order_detail {
					display: flex;
					flex-direction: column;
					/* padding: 30rpx 0; */
					max-height: 440rpx;
					overflow: scroll;

					.order_detail_item {
						display: flex;

						&:not(:last-child) {
							margin-bottom: 30rpx;
						}

						.goods-img-bg {
							background-size: 100% 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							margin: 20rpx;

							.goods_image {
								width: 120rpx;
								height: 120rpx;
							}

							/* border: 1rpx solid #e7e7e7; */
						}

						.goods_info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 20rpx 20rpx 20rpx 0;
							flex: 1;

							.goods_name {
								width: 100%;
								-webkit-line-clamp: 3;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								font-size: 28rpx;
							}

							.goods_attr {
								.goods_attr_value {
									font-size: 24rpx;
									background-color: rgba(255, 255, 255, 0.2);
									padding: 5rpx 10rpx;
									color: white;
									border-radius: 4rpx;
								}
							}

							.goods_price {
								display: flex;
								justify-content: space-between;
								align-items: baseline;

								.price {
									display: flex;
									align-items: baseline;
									color: #EE5093;
									font-size: 30rpx;

									.price_icon,
									.price_dot,
									.price_float {
										font-size: 24rpx;
									}
								}
							}

							.goods_num {
								color: white;
								font-size: 24rpx;
							}
						}
					}
				}

				.bottom {
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 80rpx;
					padding-bottom: 20rpx;

					.total {
						display: flex;
						align-items: baseline;

						.total_title {
							display: flex;
							align-items: baseline;
							font-size: 24rpx;

							.total_title_info {
								color: white;
								margin-right: 10rpx;
							}
						}

						.total_price {
							display: flex;
							align-items: baseline;
							font-size: 40rpx;
							color: white;
							font-weight: bold;

							.price_icon,
							.price_dot,
							.price_float {
								font-size: 24rpx;
							}
						}
					}

					.order_action {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						margin: 10rpx 0 10rpx 0;

						.order_action_btn {
							width: 140rpx;
							height: 46rpx;
							line-height: 46rpx;
							font-size: 24rpx;
							margin-left: 20rpx;
							text-align: center;
							color: white;

							&.cancel {
								opacity: 0.6;
							}

							&.pay,
							&.receive {}

							/* &.receive {
              background-color: #a361f6;
            } */
						}
					}
				}
			}
		}
	}
</style>